<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import storyList from './const'
import type { StoryInterface } from '@/types/views/story'

const audio = ref<HTMLAudioElement | null>(null)

const storys = ref([...storyList])

// 点击播放
const start = (story: StoryInterface) => {
  // 播放
  if (!story.active) {
    // 修改状态
    updateActive(story.id)
    play(story.src, story)
  }
  // 停止播放
  if (story.active) {
    const result = storys.value.map((item) => {
      return { ...item, active: false }
    })
    storys.value = result
    stop()
  }
}

const currentAudioId = ref<StoryInterface['id'] | null>(null)
const play = (src: StoryInterface['src'], current: StoryInterface) => {
  currentAudioId.value = current.id
  // 没有 audio 则创建一个，有的话切换音频源
  if (audio.value === null) {
    audio.value = new Audio(src)
    // 绑定事件
    setupEventListeners()
  } else {
    audio.value.src = src
  }
  // 清空之前的状态
  updateAllActive('percentage', 0)
  // 播放
  audio.value.play()
}

const stop = () => {
  if (audio.value) {
    audio.value.pause()
    currentAudioId.value = null
  }
}

const setupEventListeners = () => {
  if (!audio.value) return
  // audio.value.addEventListener('play', () => {
  // })
  // audio.value.addEventListener('pause', () => {
  // })

  // 播放完成事件
  audio.value.addEventListener('ended', () => {
    // 将当前播放的条纹动画停止
    updateActive(currentAudioId.value as number, 'duration', 0)
  })

  // 播放中会一直触发
  audio.value.addEventListener('timeupdate', () => {
    if (!audio.value) return
    // 更新进度条
    const currentTime = audio.value.currentTime
    const duration = audio.value.duration
    const percentage = (currentTime / duration) * 100
    updateActive(
      currentAudioId.value as number,
      'percentage',
      Number.isNaN(percentage) ? 0 : percentage,
    )
  })
}

// 将全部数据改为统一的状态
const updateAllActive = (key: keyof StoryInterface, value: unknown) => {
  const result = storys.value.map((item) => {
    return { ...item, [key]: value }
  })
  storys.value = result
}

// 修改当前播放的状态
const updateActive = (
  id: StoryInterface['id'],
  key?: keyof StoryInterface,
  value?: unknown,
) => {
  const result = storys.value.map((item) => {
    if (item.id === id) {
      if (!key) {
        return { ...item, active: true }
      } else {
        return { ...item, [key]: value }
      }
    }
    if (!key) {
      return { ...item, active: false }
    } else {
      return item
    }
  })
  storys.value = result
}

onUnmounted(() => {
  if (audio) {
    audio.value = null
  }
})
</script>

<template>
  <div class="base-card story-container">
    <div
      v-for="item in storys"
      :key="item.id"
      class="story-card-item"
      :class="item.active && 'story-card-item-active'"
    >
      <div class="card-item-head">
        <div class="icon-play c-center" @click="start(item)">
          <el-icon v-if="item.active" size="20">
            <Help />
          </el-icon>
          <ElIcon v-else size="20">
            <CaretRight />
          </ElIcon>
        </div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
      <div class="card-item-cont">
        <el-progress
          class="card-item-cont-progress"
          :percentage="item.percentage"
          :stroke-width="10"
          :duration="item.duration"
          :show-text="false"
          striped
          striped-flow
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.story-container {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-flow: row wrap;
  gap: 2.6%;
  overflow: auto;

  .story-card-item {
    min-width: 23%;
    width: 23%;
    height: 100px;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0px 1px 0px 0px #01040966;
    // border: 1px solid #3d444d;
    border: 1px solid var(--lineColor);
    // background-color: #0d1117;
    background-color: var(--backColor);
    cursor: pointer;
    transform: translateY(0px);
    transition:
      color 0.3s,
      transform 0.3s;

    &:hover {
      color: #fff;
      transform: translateY(-3px);
    }

    .card-item-head {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 20px;

      .icon-play {
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 50%;
        background-color: var(--bodyColor);
      }

      .title {
        width: calc(100% - 60px);
        padding-right: 5px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        /* 不换行 */
        white-space: nowrap;
        /* 隐藏溢出部分 */
        overflow: hidden;
        /* 用省略号表示溢出部分 */
        text-overflow: ellipsis;
      }
    }

    .card-item-cont {
      margin-top: 5px;
      width: 100%;
      height: 40px;

      .card-item-cont-progress {
        height: 40px;
      }
    }
  }

  .story-card-item-active {
    color: #fff;
  }
}
</style>
